<!--
	作者：andli
	时间：2015-10-22
	描述：图片轮播 插件式 使用
-->
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			/*通过css来控制 图片轮播控件的位置*/
			
			.mui-slider {
				margin-top: 50px;
			}
			.mui-slider-indicator {
				margin-left: 130px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">图片轮播 网络图片</h1>
		</header>

		<div class="mui-content">
		</div>

		<script type="text/javascript" src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/zepto.min.js"></script>
		<script type="text/javascript" src="js/mui.mgallery.js"></script>

		<script type="text/javascript" charset="utf-8">
			mui.init();
			mui.plusReady(function() {
				//测试数据
				var jsondata = {
					"Data": [{
						"title": "微微一笑很倾城",
						"url": "http://7xmx2j.com1.z0.glb.clouddn.com/apicloud/d2178b39bb932a88a97de4f7b887cdc6.png"
					}, {
						"title": "东京爱情故事",
						"url": "http://7xmx2j.com1.z0.glb.clouddn.com/apicloud/c2d2f43284665ac74af0073cfb23e2f4.png"
					}, {
						"title": "剩女W小姐脱光记",
						"url": "http://7xmx2j.com1.z0.glb.clouddn.com/apicloud/7649b8d2d7276f8e0871dc591f78e653.png"
					}, {
						"title": "法航447的最后4分钟",
						"url": "http://7xmx2j.com1.z0.glb.clouddn.com/apicloud/4525a00eae41273882abaf381f192879.png"
					}]
				};
				/**
				 * 作者 andli 时间 20151022
				 * 图片轮播 控件的使用
				 * @param {Object} element  		添加元素选择器
				 * @param {Object} galleryData 	json数据
				 * @param {Object} isLoop 		是否循环切换
				 * @param {Object} isauto 		是否自动播放
				 * @param {Object} callback		点击回调函数
				 */
				addGallery('.mui-content', jsondata.Data, true, true, function(id) {
					plus.nativeUI.alert(jsondata.Data[id].title);
				});
			});
		</script>
	</body>

</html>